<template>
  <div class="typeItem">
     <h3 class="title">{{item.title}}</h3>
		 <div class="content">
			 <div v-for="i in item.content" class="type">
				 <a href="#" @click="change">{{i}}</a>
			 </div>
		 </div>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
        
      }
    },
    computed:{
      
    },
    props:{
      item:{
        type:Object,
        default(){
          return {title:"语言",content:['华语','日语','英语','西语','法语']}
        }
      }
    },
    methods:{
      change(){
        let e=window.event
        e.preventDefault()
				let items=document.querySelectorAll(".type .typeItem .content .type a")
				for(let i of items){
					i.classList.remove('active')
				}
				e.target.classList.add('active')
      }
    },
    components:{
       
    },
    created(){
      
    },
    activated(){
    
    },
    mounted(){
    
    },
    updated(){
      
    },
    deactivated(){
    
    },
    destroyed(){
    
    },
  }
</script>

<style scoped>
	.content{
		margin-top: 15px;
		position: relative;
	}
	.type{
		margin: 10px 0px;
		margin-right: calc(50% - 66px);
		display: inline-block;
	}
	.type a{
		display: inline;
		padding: 6px;
	}
	.type:nth-of-type(3n+1){
		margin-left: 0px;
	}
	.type:nth-last-of-type(3n){
		margin-right: 0px;
	}
	.active{
		color: #fff;
		background-color: var(--bcc-green);
	}
</style>
